Use prebuilt templates on your nextjs frontend to implement good UIUX practices

In Next.js 13+ with the App Router, there are two main ways to handle not found pages:

1. Global 404 page using 

   not-found.tsx

2. Custom handling using the 

   notFound()

    function

Let's implement both approaches:

1. First, create a global not-found page:

import Link from "next/link";
import { ArrowLeft } from "lucide-react";

export default function NotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-neutral-900 px-4">
      <div className="max-w-md text-center">
        <h1 className="text-6xl font-bold text-gray-900 dark:text-gray-100 mb-4">
          404
        </h1>
        <h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
          Page Not Found
        </h2>
        <p className="text-gray-600 dark:text-gray-400 mb-8">
          Sorry, we couldn't find the page you're looking for. It might have been
          removed, renamed, or is still under construction.
        </p>
        <Link
          href="/"
          className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to Home
        </Link>
      </div>
    </div>
  );
}

2. For dynamic routes or specific sections, you can use the notFound() function:

import { notFound } from "next/navigation";

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  
  // If post doesn't exist, trigger the not-found page
  if (!post) {
    notFound();
  }
  
  // ...rest of your component code
}

3. For sections under construction, create a reusable component:

import Link from "next/link";
import { ArrowLeft, Construction } from "lucide-react";

export function UnderConstruction() {
  return (
    <div className="flex min-h-[50vh] items-center justify-center bg-gray-50 dark:bg-neutral-900 px-4">
      <div className="max-w-md text-center">
        <Construction className="h-16 w-16 mx-auto text-yellow-500 mb-4" />
        <h2 className="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4">
          Under Construction
        </h2>
        <p className="text-gray-600 dark:text-gray-400 mb-8">
          This section is currently being built. Please check back later!
        </p>
        <Link
          href="/"
          className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to Home
        </Link>
      </div>
    </div>
  );
}

4. Use the UnderConstruction component in pages that are still being developed:

// Example usage in a page that's under construction
// filepath: /Users/prawegko/codeSpace_temp/codecuriousBlog_FullStack/frontend-codecurious-blog-nextjs/src/app/features/page.tsx
import { UnderConstruction } from "@/components/under-construction";

export default function FeaturesPage() {
  return <UnderConstruction />;
}

The benefits of this approach:

1. **Hierarchy Support**: The global `not-found.tsx` works across all routes
2. **Flexibility**: You can use `notFound()` function for dynamic routes
3. **Consistency**: The UnderConstruction component provides a consistent message
4. **User Experience**: Clear navigation back to home page
5. **SEO-friendly**: Proper status codes are sent to search engines

To use these components:

1. The global 404 page will automatically work for non-existent routes
2. For dynamic routes, use `notFound()` when content isn't found
3. For pages under construction, import and use the `UnderConstruction` component

Remember that Next.js will automatically handle the routing and status codes when using these components, ensuring proper SEO and user experience.